<template>
  <div class="content-item">
    <form class="condition_query">
      <span class="txt">标段</span>
      <el-select v-model="formInfo.bidSection" size="small" class="inline-input" @change="getWorkAreaList">
        <el-option v-for="item in biaoduanList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>

      <span class="txt">工区</span>
      <el-select v-model="formInfo.areaId" size="small" class="inline-input" @change="getDeviceInfo">
        <el-option v-for="item in workAreaInfo" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>

      <span class="txt">设备</span>
      <el-select
        v-model="formInfo.thirdPartyId"
        size="small"
        class="inline-input"
        placeholder="请选择"
        @change="getCarRunList">
        <el-option v-for="item in deviceList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>

      <span class="txt">车牌号码</span>
      <el-input v-model="formInfo.number" size="small" clearable class="inline-input" placeholder="请输入" />

      <span class="txt">车主姓名</span>
      <el-input v-model="formInfo.name" size="small" clearable class="inline-input" placeholder="请输入" />

      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        style="margin-left:40px"
        @click="queryListData"
      >查询</el-button>
    </form>

    <TableModel :table-data="carList" :loading="loading">
      <el-table-column prop="number" label="车牌号码"></el-table-column>
      <el-table-column prop="name" label="车主姓名"></el-table-column>
      <el-table-column prop="bidSectionName" label="标段"></el-table-column>
      <el-table-column prop="areaName" label="所属工区"></el-table-column>
      <el-table-column prop="deviceCarName" label="车辆设备"></el-table-column>
      <el-table-column prop="plateNumber" label="车牌类型"></el-table-column>
      <el-table-column prop="plateNumberColor" label="车牌颜色"></el-table-column>
      <el-table-column prop="carType" label="车辆类型"></el-table-column>
      <el-table-column prop="carColorName" label="车辆颜色"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleModifCar(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="handleDelCar(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </TableModel>
    <Pagination :pageData="pageData" @pageNum="pageNumData" @pageSize="pageSizeData"></Pagination>
  </div>
</template>

<script>
import Pagination from "../Pagination";
import TableModel from "../../models/TableModel";
import HttpInterface from "../../../util/httpInterface";
import constants from "../../../util/constants";
import { mapState, mapActions } from "vuex";
import { messageBox } from "../../../util/utils";
import eventBus from "../../../util/eventBus";

export default {
  name: "CarRunList",
  components: {
    Pagination, TableModel
  },
  data() {
    return {
      loading: false,
      carList: [],
      tableHeight: 0,
      formInfo: {
        bidSection: "",
        number: "",
        name: "",
        thirdPartyId: "",
        areaId: ""
      },
      pageData: {
        total: 0,
        pageNum: 1,
        pageSize: 20
      },
      carColorList: constants.VEHICLE_COLOR,
      carTypeList: constants.VEHICLE_TYPE,
      plateNumberList: constants.PLATE_NUMBER_TYPE,
      plateNumberColorList: constants.PLATE_NUMBER_COLOR,
      carColor: [],
      carType: [],
      plateNumber: [],
      plateNumberColor: [],
      deviceList: [],
      workAreaInfo: []
    };
  },

  computed: {
    ...mapState(["tenantId", "biaoduanList", "workAreaList", "deviceCarList"]),
  },

  watch: {
    biaoduanList(val) {
      this.formInfo.bidSection = val[0].id;
      this.getWorkAreaList();
    }
  },

  created() {
    eventBus.$on("getListInfo", (data) => {
      this.formInfo.bidSection = data.bidSection;
      this.formInfo.areaId = data.areaId;
      this.formInfo.thirdPartyId = data.thirdPartyId;
      this.getWorkAreaList(data);
    })
  },

  methods: {
    ...mapActions(["getCarDevice", "selectByBidSection"]),

    // 根据标段 查 工区列表
    getWorkAreaList(obj) {
      let _this = this;
      this.selectByBidSection({
        bidSection: this.formInfo.bidSection,
        fn: function (data) {
          if (_this.formInfo.bidSection) {
            _this.workAreaInfo = data;
            if (typeof obj === "object") {
              _this.formInfo.areaId = obj.areaId;
            } else {
              if (data.length == 0) {
                _this.formInfo.areaId = "";
              } else {
                _this.formInfo.areaId = data[0].id;
              }
            }
          } else {
            _this.workAreaInfo = [];
            _this.formInfo.areaId = "";
          }
          _this.getDeviceInfo(obj);
        }
      })
    },

    // 根据工区 查 车辆设备
    getDeviceInfo(obj) {
      let _this = this;
      this.getCarDevice({
        areaId: this.formInfo.areaId,
        fn (data) {
          if (_this.formInfo.areaId) {
            _this.deviceList = data;
            if (typeof obj === "object") {
              _this.formInfo.thirdPartyId = obj.thirdPartyId;
            } else {
              if (data.length == 0) {
                _this.formInfo.thirdPartyId = "";
              } else {
                _this.formInfo.thirdPartyId = data[0].id;
              }
            }
          } else {
            _this.deviceList = [];
            _this.formInfo.thirdPartyId = "";
          }

          _this.getCarRunList();
        }
      })
    },

    pageNumData (page) {
      this.pageData.pageNum = Number(page);
      this.getCarRunList();
    },

    pageSizeData (page) {
      this.pageData.pageSize = Number(page);
      this.getCarRunList();
    },

    // 获取列表数据
    getCarRunList () {
      let { bidSection, areaId, thirdPartyId } = this.formInfo;
      let dataInfo = { bidSection, areaId, thirdPartyId };
      eventBus.$emit("getCarComeOut", dataInfo);

      let _this = this;
      let { pageSize, pageNum } = this.pageData;
      var params = { pageSize, pageNum, thirdPartyId };
      HttpInterface.requestGet(this, HttpInterface.URL_VEHICLE_LIST, params, function (res) {
        let { success, other } = res.data;
        if (success) {
          let { data, total } = other;
          _this.renderDataInfo(data, total);
        } else {
          _this.errorMessage('加载失败！');
        }
      }, function (err) {
        _this.errorMessage('加载失败！');
      })
    },

    // 查询
    queryListData () {
      let _this = this;
      var params = this.formInfo;
      params.pageSize = this.pageData.pageSize;
      params.pageNum = this.pageData.pageNum;
      HttpInterface.requestGet(this, HttpInterface.URL_VEHICLE_LIST, params, function (res) {
        let { success, other } = res.data;
        if (success) {
          var { data, total } = other;
          _this.renderDataInfo(data, total);
        } else {
          _this.errorMessage('加载失败！');
        }
      }, function (err) {
        _this.errorMessage('加载失败！');
      })
    },

    renderDataInfo(data, total) {
      let { carColorList, carTypeList, plateNumberList, plateNumberColorList, biaoduanList } = this;
      if (!data) {
        this.pageData.total = 0;
        this.carList = [];
        return;
      }

      data.forEach(item => {
        let str = "", str1 = "";
        carColorList.forEach(car1 => {
          if (item.carColor == car1.id) item.carColorName = car1.text;
        })

        carTypeList.forEach(car2 => {
          if (item.brand == car2.id) item.carType = car2.text;
        })

        plateNumberList.forEach(car3 => {
          if (item.model == car3.id) item.plateNumber = car3.text;
        })

        plateNumberColorList.forEach(car4 => {
          if (item.brandColor == car4.id) item.plateNumberColor = car4.text;
        })

        biaoduanList.forEach(key => {
          if (item.bidSection == key.id) item.bidSectionName = key.name;
        })

        item.thirdPartyVehicleList.forEach(key => {
          str += key.name + "、";
        })
        item.deviceCarName = str.slice(0, -1);

        item.workAreaList.forEach(key => {
          str1 += key.name + "、";
        })
        item.areaName = str1.slice(0, -1);
      })

      this.pageData.total = total;
      this.carList = data;
    },

    handleModifCar (row) {
      this.$emit("modifCar", row)
    },

    handleDelCar (row) {
      let _this = this;
      messageBox(() => {
        let parmas = {
          vehicleId: row.vehicleId,
          thirdPartyId: this.formInfo.thirdPartyId,
          id: row.id
        }
        HttpInterface.requestPost(this, HttpInterface.URL_VEHICLE_DEL, parmas, function (res) {
          var data = res.data;
          if (data.success) {
            _this.successMessage("删除成功");
            _this.getCarRunList();
          } else {
            _this.errorMessage("删除失败！");
          }
        }, null, false)
      })
    }
  }
};
</script>

<style  scoped>
.condition_query {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.txt {
  margin-right: 10px;
  font-size: 14px;
}

.inline-input {
  width: 150px;
  margin-right: 22px;
}
</style>
